import { CarOutlined, PhoneOutlined, UserOutlined } from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button, Card, Col, Form, Input, Modal, Row, Select, Space } from 'antd';
import { useState } from 'react';
import TerraceImg from '../../../public/img/terrace.png';
import './index.less';
import {
  columns1,
  columns2,
  columns3,
  data1,
  data2,
  data3,
  modalFormData,
  terraceImgList,
} from './listConfig';
import TableList from './TableList';

const AreaManage = () => {
  const { Search } = Input;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [terraceNo, setTerraceNo] = useState(null);

  const showModal = (terraceNo) => {
    setIsModalOpen(true);
    setTerraceNo(terraceNo);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onSearch = (value, _e, info) => {};

  const handleFooterSelectChange = (value) => {};

  const ModalFooter = () => {
    return (
      <Select
        defaultValue="联系司机"
        onChange={handleFooterSelectChange}
        options={[
          { value: '在线联系', label: '在线联系' },
          { value: '电话联系', label: '电话联系' },
          { value: '短信联系', label: '短信联系' },
        ]}
      />
    );
  };

  const renderLabel = (key) => {
    let labelNode = <div>{key}</div>;
    switch (key) {
      case '车牌号':
        labelNode = (
          <>
            <CarOutlined />
            &nbsp;车牌号
          </>
        );
        break;
      case '司机姓名':
        labelNode = (
          <>
            <UserOutlined />
            &nbsp;司机姓名
          </>
        );
        break;
      case '联系电话':
        labelNode = (
          <>
            <PhoneOutlined />
            &nbsp;联系电话
          </>
        );
        break;
      default:
        break;
    }
    return labelNode;
  };

  const getModalFormFields = () => {
    const children = [];
    for (let key in modalFormData) {
      if (modalFormData.hasOwnProperty(key)) {
        children.push(
          <Col
            span={8}
            key={key}
            className={key === '车牌号' ? 'areaManage-modalForm-cardItem' : ''}
          >
            <Form.Item label={renderLabel(key)}>{modalFormData[key]}</Form.Item>
          </Col>,
        );
      }
    }
    return children;
  };

  return (
    <PageContainer
      extra={[
        <Search
          key="1"
          placeholder="请输入运单号"
          allowClear
          enterButton="搜索"
          style={{ width: 304, float: 'right' }}
          onSearch={onSearch}
        />,
      ]}
    >
      <TableList rowKey="key" headerTitle="园区车辆监控" columns={columns1} data={data1} />
      <Space />
      <TableList rowKey="key" headerTitle="月台车辆监控" columns={columns2} data={data2} />
      <ProCard title="园区监控总览" bordered headerBordered gutter={16}>
        <Row gutter={24}>
          {terraceImgList.map((_, index) => (
            <Col
              key={index}
              span={6}
              style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
            >
              <img style={{ width: 244, height: 150 }} src={TerraceImg} alt="月台状态" />
              <Button
                type="text"
                style={{ textAlign: 'center', marginTop: 8 }}
                onClick={() => showModal(index + 1)}
              >
                月台{index + 1}
              </Button>
            </Col>
          ))}
        </Row>
      </ProCard>
      <TableList rowKey="key" headerTitle="装卸搬运机器人监测" columns={columns3} data={data3} />

      <Modal
        width={800}
        title={'月台' + terraceNo}
        footer={ModalFooter}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Card title="车辆信息" extra={<Button danger>异常上报</Button>} style={{ width: '100%' }}>
          <Form>
            <Row gutter={24}>{getModalFormFields()}</Row>
          </Form>
        </Card>
      </Modal>
    </PageContainer>
  );
};
export default AreaManage;
